﻿@using xConnected.Common.ExpertProfile
<div>
    <table class="table table-striped table-condensed">
        <tbody data-bind="foreach: profiles">
            <tr class="row">
                <td class="span2">
                    <div align="center">
                        <img id="profilePhoto" data-bind="attr: {src: $data.Photo()}" alt="Profile photo" style="width: 100px">
                    </div>
                </td>
                <td data-bind="text: Id" class="hidden"></td>
                <td class="span4">
                    <a data-toggle="modal" href="#DetailsDialog" data-bind="click: function() { $root.profile.selectDetails($data); }" >
                        <h4 data-bind="text: Title"></h4>
                    </a>
                    <h5 data-bind="html: Description"></h5>
                    <span data-bind="html: Experience" ></span>
                    <div data-bind="with: Industry"><button class="btn btn-mini" data-bind="text: Description"></button></div>
                    <ul data-bind="foreach: CategorySkills"class="btn-toolbar btn-group" style="margin-left: 0px">
                        <li class="btn-group tableProfilesCategory" data-bind="event: { mouseover: function() { $root.profile.showTooltip($data)}, mouseout: function() { $root.profile.hideTooltip()} }"><a  class="btn btn-mini btn-inverse" data-bind=" text: CategoryName, click: function() { $root.profile.setCategoryId($data); }"></a></li>
                    </ul>
                </td>
                <td>
                    <h5 data-bind="text: Location"></h5>
                    <i class="icon-envelope"></i><a data-toggle="modal" href="#ContactFreelancer" data-bind="click: function() { $root.profile.selectProfileAndReset($data); }">@Resources.Contact</a>
                </td>
                <td>
                    <a data-toggle="modal" class="btn btn-small" data-bind="click: function() { $root.profile.selectDetails($data); }" ><i class="icon-zoom-in"></i></a>
                </td>
            </tr>
        </tbody>
    </table>
</div>